<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
<link href="layui/css/layui.css" rel="stylesheet"
	type="text/css" />
<script src="layui/layui.js"></script>
</head>
<body>
	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>

	<!-- 表格的行内工具条 -->
	<script type="text/html" id="barDemo2">
  		<a class="layui-btn layui-btn-xs" lay-event="">强制退出</a>
	</script>
	
	<!-- 修改的弹窗 -->
	<div id="xiugaichuang" style="display: none">
		<form class="layui-form" onsubmit="return false" id="xiugaiForm"
			lay-filter="xiugaiForm">
			<div class="layui-form-item">
				<label class="layui-form-label">阅览室名称</label>
				<div class="layui-input-inline">
					<input type="text" name="rname" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-inline">
					<input type="text" name="remark" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="xiugaibtn">修改提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			<!--  修改的表单中，需要放一个 隐藏域，用来储存id-->
			<input type="hidden" name="logid"/>
			
		</form>
	</div>
	<!-- 脚本代码部分 -->
	<script>
		layui.use([ 'form', 'layer', 'table' ], function() {
			var form = layui.form;
			var table = layui.table;
			var layer = layui.layer;
			var $ = layui.$;

			//渲染表格
			table.render({
				elem : '#demo', //指定原始表格元素选择器（推荐id选择器）
				page : true,//开启分页
				url : 'getLogList',
				toolbar : '#barDemo1',
				cols : [ [ //标题栏
				{
					checkbox : true
				}, {
					field : 'logid',
					title : '日志id',
					width : 120
				}, {
					field : 'cardNo',
					title : '卡号',
					width : 120
				}, {
					field : 'rname',
					title : '阅览室编号',
					width : 120
				}, {
					field : 'inTime',
					title : '进入时间',
					templet:'<div>{{ layui.util.toDateString(d.inTime, "yyyy-MM-dd HH:mm:ss") }}</div>',
					width : 250
				},{
					field : 'outTime',
					title : '离开时间',
					//templet:'<div>{{ layui.util.toDateString(d.outTime, "yyyy-MM-dd HH:mm:ss") }}</div>',
					width : 250
				},{
					field : 'status',
					title : '状态',
					width : 120
				},{
					toolbar : '#barDemo2',
					title : '操作'
				}] ]
			});
			//渲染表格--end

			//监听行内工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				
					layer.confirm('真的退出吗？', function(index) {
						//向服务端发送删除指令
						var url = "update";
						$.post(url,{logid:data.logid},function(res){
							layer.alert(res.msg,function(){
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						},"json");
					});
				
			});
			//监听行内工具条---end
			
			//修改提交的监听
			form.on('submit(xiugaibtn)', function(data) {
				var url = "update";
				$.post(url,data.field,function(res){
					layer.alert(res.msg,function(){
						layer.closeAll(); //关闭所有的窗口
						table.reload('demo', {}); //表格重载
					});
				},"json");
				
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//修改提交的监听--end
		});
	</script>








</body>
</html>